<!--工厂收机确认-->
<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="返厂批次号" v-model="searchDto.batch" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="快递单号" v-model="searchDto.logisticsNumber" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchDto.backTime"
          placeholder="选择返厂日期"
          value-format="yyyy-MM-dd"
          format="yyyy 年 MM 月 dd 日"
          type="date"
          :picker-options="pickDate"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAcceptOrderList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="exportLoading" @click="acceptExport()">数据导出</el-button>
      </el-form-item>
    </el-form>

    <custom-table
      :data="acceptWorkOrderList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :operationColumn="operationColumn"
      :pagination="pagination">
    </custom-table>

    <el-dialog title="批次机器明细" :visible.sync="detailDialogVisible" :close-on-click-modal="false">
      <!-- 批次内机器详细列表 -->
      <custom-table
        :data="detailList"
        :columns="detailColumns"
        :tableLoadingFlag="detailTableLoadingFlag"
        :pagination="pagination1">
      </custom-table>
      <div slot="footer">
        <el-button type="primary" @click="onBtnCancel()">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设备收机" :visible.sync="receiveDialogVisible" :close-on-click-modal="false">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="扫码录入" v-model="scanInput" clearable @change="scanInputChange"></el-input>
        </el-form-item>
        <el-form-item>
          <el-transfer
            filterable
            filter-placeholder="YSTSN匹配"
            v-model="receiveData"
            :data="receiveList"
            :titles="['返还设备', '收机设备']">
          </el-transfer>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="receiveDialogVisible = false">取消</el-button>
        <!--v-no-more-click为防止重复提交指令-->
        <el-button type="primary" @click="onBtnReceive()" v-no-more-click>收机</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设备拒收" :visible.sync="refuseDialogVisible" :close-on-click-modal="false">
      <el-form :inline="true">
        <el-form-item>
          <el-transfer
            filterable
            filter-placeholder="YSTSN匹配"
            v-model="refuseData"
            :data="refuseList"
            :titles="['返还设备', '拒收设备']">
          </el-transfer>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="refuseDialogVisible = false">取消</el-button>
        <!--v-no-more-click为防止重复提交指令-->
        <el-button type="primary" @click="onBtnRefuse()" v-no-more-click>拒收</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {
    apiGetAcceptOrderList,
    apiGetReturnFactoryDevices,
    apiPostFactoryDeviceRefuse,
    apiPostFactoryDeviceReceive,
    apiAcceptExport
  } from '@/api/repairs/factory/index'
  import {parseTime} from '@/utils'
  import {getRoleType} from '@/utils/token'
  import {isNotEmpty} from '@/utils/validation'
  import {downloadExcel} from "../../../utils";

  export default {
    components: {
      CustomTable
    },
    created () {
      this.getAcceptOrderList()
      // 不是工厂操作按钮隐藏
      if (getRoleType() !== '4') {
        this.operationColumn = null
      }
    },
    data () {
      return {
        // 日期搜索限制
        pickDate: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        // 工单查询等待加载
        tableLoadingFlag: false,
        // 工单查询列
        columns: [
          {label: '返厂批次号', name: 'batch', align: 'center', width: 180},
          {label: '快递单号', name: 'logisticsNumber', align: 'center', width: 180},
          {label: '返厂时间', name: 'backTime', align: 'center', width: 180, formatter: this.formatTime},
          {label: '省份', name: 'province', align: 'center'},
          {label: '地市', name: 'city', align: 'center'},
          {label: '维修工厂', name: 'factoryName', align: 'center', width: 100},
          {label: '返厂人姓名', name: 'sender', align: 'center', width: 100},
          {label: '联系电话', name: 'tel', align: 'center', width: 160},
          {label: '统计', name: 'statistic', align: 'center', width: 160},
          {label: '台数', name: 'num', align: 'center'},
          {label: '备注', name: 'remark', align: 'center'}
        ],
        // 详情一览查询列
        detailColumns: [
          {label: '品牌', name: 'brandName', align: 'center'},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: 'YSTSN', name: 'ystsn', width: 180, align: 'center'},
          {label: '状态', name: 'status', align: 'center', formatter: this.formatStatus},
          {label: '操作人', name: 'receiverName', width: 180, align: 'center'}
        ],
        // 工单查询操作栏
        operationColumn: {
          width: '200',
          operations: [
            {name: '详细', callback: this.onBtnDetail},
            {name: '收机', callback: this.onBtnReceiveDialog, page: 'factoryRec'},
            {name: '拒收', callback: this.onBtnRefuseDialog, page: 'factoryRec'}
          ]
        },
        // 工单一览分页
        pagination: this.getData(this.getAcceptOrderList),
        // 详情一览分页
        pagination1: this.getData(this.onBtnDetail),
        // 返厂工单list
        acceptWorkOrderList: [],
        // 设备详情一览
        detailList: [],
        // 可拒收设备一览
        refuseList: [],
        // 可收机设备一览
        receiveList: [],
        refuseDialogVisible: false,           // 设备拒收模态框
        receiveDialogVisible: false,           // 备注说明模态框
        detailDialogVisible: false,           // 批次详细模态框
        detailTableLoadingFlag: false,
        // 拒收设备
        refuseData: [],
        // 收机设备
        receiveData: [],
        // 当前拒收批次
        refuseBatch: '',
        // 当前收机批次
        receiveBatch: '',
        scanInput: '',
        listQuery: {
          pageNumber: 1,
          pageSize: 10
        },
        // 返厂工单一览查询dto
        searchDto: {
          batch: '', // 批次号
          logisticNum: '', // 快递单号
          backTime: ''
        },
        exportLoading: false
      }
    },
    methods: {
      // 设备状态格式化
      formatStatus (row, column, cellValue) {
        if (cellValue === null) {
          return '未接收'
        }
        return cellValue
      },
      // 时间显示格式化
      formatTime (row, column, cellValue) {
        return parseTime(cellValue)
      },
      // 重置查询条件
      clearListQuery () {
        this.listQuery = {
          pageNumber: 1,
          pageSize: 10
        }
      },
      // 获取返厂工单一览
      getAcceptOrderList (listQuery) {
        this.clearListQuery()
        this.tableLoadingFlag = true
        if (isNotEmpty(this.searchDto.batch)) {
          this.listQuery.batch = this.searchDto.batch
        }
        if (isNotEmpty(this.searchDto.logisticsNumber)) {
          this.listQuery.logisticsNumber = this.searchDto.logisticsNumber
        }
        if (isNotEmpty(this.searchDto.backTime)) {
          this.listQuery.backTime = this.searchDto.backTime
        }
        if (listQuery !== undefined) {
          this.listQuery.pageNumber = listQuery.pageNumber
          this.listQuery.pageSize = listQuery.pageSize
        }
        apiGetAcceptOrderList(this.listQuery).then(response => {
          this.acceptWorkOrderList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 显示返厂工单详情
      onBtnDetail (row) {
        this.detailList = []
        // 显示“返厂工单信息中的每一台机器信息”页面
        if (isNotEmpty(row.batch)) {
          this.batch = row.batch
        } else {
          row.batch = this.batch
        }
        apiGetReturnFactoryDevices(row).then(response => {
          this.detailList = response.data
          this.pagination1.totalRecords = response.totalRecords
          if (this.detailList.length > 1) {
            this.lastDevice = 0
          } else {
            this.lastDevice = 1
          }
          this.detailDialogVisible = true
        }).catch(() => {
        })
      },
      // 扫码枪功能
      scanInputChange () {
        let scanYstsn = this.scanInput
        let flag = false
        for (let i of this.receiveList) {
          if (scanYstsn === i.key) {
            flag = true
            this.receiveData.push(i.key)
            scanYstsn = ''
            this.scanInput = ''
            break
          }
        }
        if (!flag) {
          this.$message({
            showClose: true,
            message: '该批次不存在这台机器',
            type: 'warning'
          })
        }
      },
      // 工厂收机
      onBtnReceive () {
        let listQuery = {
          batch: this.receiveBatch,
          ystsnArray: this.receiveData
        }
        if (listQuery.ystsnArray.length !== 0) {
          apiPostFactoryDeviceReceive(listQuery).then(() => {
            this.$message.success({
              showClose: true,
              message: '收机成功'
            })
            this.receiveDialogVisible = false
            this.getAcceptOrderList()
          })
        } else {
          this.$message({
            showClose: true,
            message: '收机设备为空',
            type: 'warning'
          })
        }
      },
      // 设备拒收
      onBtnRefuse () {
        let listQuery = {
          batch: this.refuseBatch,
          ystsnArray: this.refuseData
        }
        if (listQuery.ystsnArray.length !== 0) {
          apiPostFactoryDeviceRefuse(listQuery).then(() => {
            this.$message.success({
              showClose: true,
              message: '拒收成功'
            })
            this.refuseDialogVisible = false
            this.getAcceptOrderList()
          })
        } else {
          this.$message({
            showClose: true,
            message: '拒收设备为空',
            type: 'warning'
          })
        }
      },
      // 拒收按钮,拒收操作弹出
      onBtnRefuseDialog (row) {
        this.refuseData = []
        this.refuseList = []
        this.refuseBatch = row.batch
        let listQuery = {
          batch: row.batch,
          isLimit: true
        }
        apiGetReturnFactoryDevices(listQuery).then(response => {
          let devices = []
          for (let device of response.data) {
            devices.push({
              key: device.ystsn,
              label: device.ystsn
            })
          }
          this.refuseList = devices
          this.refuseDialogVisible = true
        }).catch(() => {
        })
      },
      // 确认收机按钮
      onBtnReceiveDialog (row) {
        this.receiveData = []
        this.receiveList = []
        this.receiveBatch = row.batch
        let listQuery = {
          batch: row.batch,
          isLimit: true
        }
        apiGetReturnFactoryDevices(listQuery).then(response => {
          let devices = []
          for (let device of response.data) {
            devices.push({
              key: device.ystsn,
              label: device.ystsn
            })
          }
          this.receiveList = devices
          this.receiveDialogVisible = true
        }).catch(() => {
        })
      },
      onBtnCancel (formName) {
        this.wrongDataList = []
        this.fileList = []
        this.hideTable = false
        this.receiveDialogVisible = false
        this.detailTableLoadingFlag = false
        this.detailDialogVisible = false
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields()
        }
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      // 页面数据导出
      acceptExport () {
        let listQuery = {
          batch: this.searchDto.batch,
          logisticNum: this.searchDto.logisticNum,
          backTime: this.searchDto.backTime
        }
        this.exportLoading = true
        apiAcceptExport(listQuery).then(response => {
          downloadExcel(response.data, '自有售后工厂收机信息导出表')
          this.exportLoading = false
        }).catch(() => {
          this.exportLoading = false
        })
      }
    }
  }
</script>
